<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			body {
				background: white;

			}

			a {
				text-decoration: none;
				color: #999999;

			}

			.sortSpan {
				width: 3.75rem;
				height: 100%;

				color: black;
				cursor: pointer;
			}

			.sortSpanChoice {
				background: white;
				color: #007D36;

			}

			.msg {
				position: fixed;

			}
		</style>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
	</head>
	<body>
		<div style="width: 100%;height: auto;" class="divCenter">
			<div style="width: 75rem;height: auto;background: white" class="divColumn">
				<div style="width: 100%;height: 1.875rem;margin-left: 0.625rem;" class="divRow divColumnCenter">
					<span>首页>干货</span>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: #F5F5F5;"></div>
				<div style="width: 100%;" class="divRow" id="goodList">
					<div style="width: 12%;height: auto;margin-left: 0.625rem;" class="divColumn">
						<div style="width: 100%;height: 2.625rem;" class="leftAndRight">
							<span>新品推荐</span>

						</div>
						<div style="width: 100%;height: 0.0625rem;background: #F5F5F5;"></div>

						<div style="width: 100%;height: 2.625rem;" class="leftAndRight">
							<span>销量排行榜</span>

						</div>
						<div>
							<div style="width: 100%;height:11.25rem;border: 0.0625rem solid gainsboro;display: flex;float: left;margin-top: 0.625rem;"
							 class="divColumn divCenter" v-for="(item,index) in topList" @click="itemTopClick(index)">
								<img src="https://img10.360buyimg.com/n7/jfs/t1/45446/12/273/334852/5cd3e7b0E1e0bbc81/986ae0163d04f7b0.jpg"
								 style="width: 70%;" />
								<div style="width: 70%;height:0.0625rem;background: #FF744C;"></div>
								<span style="color: black;margin: 0.625rem 0rem;">52度万事如意佳品</span>
								<h3 style="color: gold;">¥999.00</h3>
							</div>

						</div>


					</div>
					<div style="width: 88%;height: auto;" class="divColumn">
						<div style="width: 100%;height: 2.625rem;background: #F9F9F9;border: 0.0625rem solid #F9F9F9;" class="leftAndRight">
							<div class="divRow divColumnCenter" style="height: 100%;">
								<span class="divCenter sortSpan" v-for="(item,index) in sortType" :class="{sortSpanChoice:item.isChoce}" v-html="item.name"
								 @click="itemChoiceClick(index)">
								</span>

							</div>
							<span style="margin-right: 0.625rem;">共0个商品</span>
						</div>
						<div style="height: 2.625rem;width: 100%;border: 0.0625rem solid #F9F9F9;" class="leftAndRight">
							<div style="margin-left: 0.625rem;" class="divRow">
								<div class="divColumnCenter">
									<img src="img/alone_choice.png" />
									<span style="margin-left: 0.375rem;">包邮</span>
								</div>
								<div class="divColumnCenter" style="margin-left: 1.125rem;">
									<img src="img/alone_choice.png" />
									<span style="margin-left: 0.375rem;">仅显示有货</span>
								</div>

							</div>
						</div>
						<!-- 具体商品列表 -->
						<div style="width: 100%;">
							<div style="width: 17.6%;height:25rem;margin-top: 0.625rem;margin-left: 1%;margin-right: 1%;border: 0.0625rem solid gainsboro;display: flex;float: left;"
							 v-for="(item,index) in dataList" class="divColumn divColumnCenter product-grid">
								<div style="width: 90%;height: 64%;border: 0.0625rem solid #EDEDED;margin-top: 0.625rem;" class="divCenter product-image "
								 @click="itemClick(index)">
									<img src="https://img13.360buyimg.com/n7/jfs/t1/76280/10/8998/450153/5d6d1538Ea9747652/9168fa014c6d9d96.jpg"
									 style="width: 90%;height: 90%;object-fit: cover;" />
								</div>
								<div style="width: 90%;height: 1.875rem;" class="leftAndRight">
									<h4>洋河梦之蓝M1</h4>
									<span style="color:#999999;">已售0件</span>
								</div>
								<div style="width: 90%;height: 3.125rem;" class="leftAndRight">
									<div class="divRow" style="height: 100%;color: #FF5516;">
										<h3>¥520.00</h3>
										<span style="margin-left: 0.625rem;font-size: 0.75rem;">包邮</span>
									</div>
									<img src="img/shop_car.png" @click="addCar(index)" style="cursor: pointer;" />

								</div>
								<div style="width: 90%;height: 1.875rem;" class="divRow divColumnCenter">
									<a href="#">
										<div class="divRow divColumnCenter">
											<img src="img/home12.png" style="margin-right: 0.5rem;" />
											<span>收藏</span>
										</div>
									</a>
									<a href="#">
										<div class="divRow divColumnCenter" style="margin-left: 0.75rem;">
											<img src="img/home10.png" style="margin-right: 0.5rem;" />
											<span>评论</span>
										</div>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;background: white;height: 7.5rem;" class="divCenter">
				<div id="page">
					<el-pagination background layout="prev, pager, next" :total="1000" @current-change="curPage">

					</el-pagination>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.4.js"></script>
		<script>
			var goodList = new Vue({
				el: '#goodList',
				data: {
					topList: [{}, {}, {}, {}],
					dataList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
					sortType: [{
							name: '综合',
							isChoce: true
						},
						{
							name: '销售量',
							isChoce: false
						},
						{
							name: '新品',
							isChoce: false
						},
						{
							name: '价格',
							isChoce: false
						}


					]


				},
				created: function() {


				},
				methods: {

					itemClick: function(index) {

						window.location.href = 'goodDetails.html'
						// window.parent.frames.location.href = "goodDetails.html"


					},
					addCar: function(index) {
						this.$notify({
							title: '成功',
							message: '这是一条成功的提示消息',
							type: 'success',
							customClass: 'msg'

						});


					},
					itemTopClick: function(index) {
						window.location.href = 'goodDetails.html'


					},
					itemChoiceClick: function(index) {
						for (var i = 0; i < goodList.sortType.length; i++) {
							if (i == index) {
								goodList.sortType[i].isChoce = true;

							} else {
								goodList.sortType[i].isChoce = false;

							}






						}




					}

				}
			});
			var app = new Vue({
				el: '#page',
				data: {},
				methods: {
					curPage(e) {
						console.log(e); //--- 点击所在的页面，从 1 开始算起

					},
				}
			});
		</script>





	</body>
</html>
